import {getShapeName} from "@/draw/util/clazz";
import {Modal} from 'ant-design-vue';

export default function (G6){

    G6.registerBehavior('clickSelected', {

        getDefaultCfg(){
            return {
                multiple: false,
                origin: {}
            }
        },

        getEvents(){
            return{
                'node:click': 'onClick',
                'edge:click': 'onClick',
                // 'edge:mouseover': 'onEdgeMouseOver',
                // 'edge:mouseleave': 'onEdgeMouseLeave',
                'canvas:click': 'onCanvasClick',
                'clearOrigin': 'clearOrigin'
                // 'node:mouseover': 'onNodeMouseOver'
            }
        },

        clearOrigin(){
            this.origin = {}
        },

        /**
         * 点击node
         * @param e
         */
        onClick(e){
            // console.log()
            if(this.graph.getCurrentMode() === 'edit'){
                e.stopPropagation();
                this._clearSelected();
                this.graph.setItemState(e.item, 'selected', true);
                let selectItems = this.graph.get('selectedItems');
                if(!selectItems)
                    selectItems = [];
                selectItems = [e.item.get('id')];
                this.graph.set('selectedItems', selectItems);
                this.graph.emit('afteritemselected', selectItems);
            }
        },

        // onEdgeMouseOver(e){
        //     console.log(e);
        // },
        //
        // onEdgeMouseLeave(e) {
        //     console.log(e);
        // },

        onCanvasClick(e){
            this.graph.drawRoute && this._addPointNode(e);
            this._clearSelected();
        },


        /**
         * 添加点
         * @param e
         * @private
         */
        _addPointNode(e){
           const clazz = "point";
           const timestamp = new Date().getTime();
           const id = clazz + timestamp;
           const addModel = {type: getShapeName(clazz)};
           this.origin.targetNode = {
               ...addModel,
               clazz:clazz,
               x: e.x,
               y: e.y,
               id: id,
               routeCode: this.graph.routeCode
           }
           this.graph.executeCommand('add', {
                type: 'node',
                addModel: {
                    ...this.origin.targetNode
                }
           });
           this._addPointEdge(e);
           this.origin.sourceNode = this.origin.targetNode;
        },

        /**
         * 添加线
         * @param e
         * @private
         */
        _addPointEdge(e){
            if(this.origin.sourceNode){
                this.graph.executeCommand('add', {
                    type: 'edge',
                    addModel: {
                        type: 'quadratic',
                        clazz: 'quadratic',
                        source: this.origin.sourceNode.id,
                        target: this.origin.targetNode.id,
                        id: this.origin.sourceNode.id + "_" + this.origin.targetNode.id,
                        label: '路线',
                        lineWidth: 2,
                        color: '#000',
                        controlPoints: [
                            {x: this.origin.sourceNode.x, y:this.origin.sourceNode.y},
                            {x: this.origin.targetNode.x, y:this.origin.targetNode.y}
                        ]
                    },
                })
            }
        },


        // onNodeMouseOver(e){
        //     console.log(e);
        //     // if(this.graph.getCurrentMode === 'edit'){
        //     //     this.graph.setItemState(e.item, 'hover', true);
        //     // }else{
        //     //     this.graph.setItemState(e.item, 'hover', false);
        //     // }
        // },

        _clearSelected(){
            let selected = this.graph.findAllByState('node', 'selected');
            selected.forEach(node => {
                this.graph.setItemState(node, 'selected', false);
            });
            selected = this.graph.findAllByState('edge', 'selected');
            selected.forEach(edge => {
                this.graph.setItemState(edge, 'selected', false);
            });
            this.graph.set('selectedItems', []);
            this.graph.emit('afteritemselected', []);
        },
    })
}
